<template>
  <div id="edit-auction-time-pop" v-show="show">
    <transition name="edit-auction">
      <div class="mini" v-show="show">
        <div class="header">
          <div class="title">修改拍卖时间</div>
          <div class="close-btn" @click="$emit('close')">
            <a-icon type="close" />
          </div>
        </div>
        <div class="container">
          <a-card :bordered="false">
            <a-form class="form">
              <a-row class="form-row">
                <a-col :lg="12" :md="12" :sm="24">
                  <a-form-item label="选择开始拍卖时间">
                    <a-date-picker
                      v-model="startValue"
                      :disabled-date="disabledStartDate"
                      show-time
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="开始时间"
                      @openChange="handleStartOpenChange"
                    />
                  </a-form-item>
                </a-col>
                <a-col
                  :lg="{ span: 10, offset: 2 }"
                  :md="{ span: 12 }"
                  :sm="24"
                >
                  <a-form-item label="选择结束拍卖时间">
                    <a-date-picker
                      v-model="endValue"
                      :disabled-date="disabledEndDate"
                      show-time
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="结束时间"
                      :open="endOpen"
                      @openChange="handleEndOpenChange"
                    />
                  </a-form-item>
                </a-col>
                <a-col span="24">
                  <!-- 下拉框 -->
                  <div>
                    <a-form-item label="更改状态">
                      <a-radio-group
                        default-value="ready"
                        button-style="solid"
                        v-model="status"
                      >
                        <a-radio-button value="ready"> ready </a-radio-button>
                        <a-radio-button value="end"> end </a-radio-button>
                      </a-radio-group>
                    </a-form-item>
                  </div>
                </a-col>
                <a-col span="24">
                  <div class="btn">
                    <a-button type="primary" @click="submitUpdate"
                      >修改</a-button
                    >
                  </div>
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import formatDate from "@/utils/formatDate";
import { updateAuction } from "@/api";
import { mapState } from "vuex";
export default {
  name: "EditAuctionTimePop",
  data() {
    return {
      // 时间
      startValue: null,
      endValue: null,
      endOpen: false,
      id: 0,
      status: "",
    };
  },
  props: ["updateData", "show"],
  watch: {
    updateData(newValue) {
      this.startValue = newValue.starttime;
      this.endValue = newValue.endtime;
      this.id = newValue.id;
      this.status = newValue.status;
    },
  },
  mounted() {
    //   console.log(this.updateData)
  },
  computed: {
    ...mapState({
      pageIndex: (store) => store.auction.pageIndex,
      pageSize: (store) => store.auction.pageSize,
    }),
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },

    // 修改拍卖日期
    async submitUpdate() {
      let { startValue, endValue } = this;
      if (startValue == null || endValue == null) {
        this.$message.error("请输入日期！");
        return;
      }
      let start = formatDate(new Date(startValue), "YYYY-mm-dd HH:MM:SS");
      let end = formatDate(new Date(endValue), "YYYY-mm-dd HH:MM:SS");
      //   发起请求修改日期
      let result = await updateAuction({
        starttime: start,
        endtime: end,
        id: this.id.toString(),
        status: this.status,
      });
      if (result.flag) {
        this.$message.success(result.msg);
        // 重新加载数据
        this.$store.dispatch("auctions", {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        });
        // 关闭模态框
        this.$emit("close");
      } else {
        this.$message.error(result.msg);
      }
    },
  },
};
</script>

<style lang='less'>
.edit-auction-enter-active,
.edit-auction-leave-active {
  transition: all 0.5s;
}
.edit-auction-enter,
.edit-auction-leave-to {
  transform: translateY(50vh);
  opacity: 0;
}
#edit-auction-time-pop {
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .mini {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 18px;
        font-weight: 700;
      }
      .close-btn {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 5px;
        border: 1px solid #eee;
        color: #999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .close-btn:hover {
        border-color: var(--themeColor1);
        color: var(--themeColor1);
      }
    }
  }
}
</style>